<template>
  <el-row class="menu_page">
    <el-col :span="12">
      <el-menu
        background-color="#324057"
        class="el-menu-vertical-demo"
        text-color="#fff"
        active-text-color="#409eff"
      >
        <router-link to="/home">
          <el-menu-item index="0">
            <template slot="title">
              <i class="fa fa-margin fa-server"></i>
              <span slot="title">首页</span>
            </template>
          </el-menu-item>
        </router-link>

        <router-link to="/introduce">
          <el-menu-item index="1">
            <template slot="title">
              <i class="fa fa-margin fa-server"></i>
              <span slot="title">平台简介</span>
            </template>
          </el-menu-item>
        </router-link>

        <router-link to="/news">
          <el-menu-item index="2">
            <template slot="title">
              <i class="fa fa-margin fa-server"></i>
              <span slot="title">新闻动态</span>
            </template>
          </el-menu-item>
        </router-link>
         <router-link to="/aquatic">
          <el-menu-item index="7">
            <template slot="title">
              <i class="fa fa-margin fa-server"></i>
              <span slot="title">水产品科普</span>
            </template>
          </el-menu-item>
        </router-link>

        <el-submenu index="3">
          <template slot="title">
            <i class="fa fa-margin fa-server"></i>
            <span slot="title">水产品可视化</span>
          </template>
          <el-menu-item-group>
            <router-link to="/fish">
              <el-menu-item index="3-1">黑鲷鱼</el-menu-item>
            </router-link>
            <router-link to="/fish/data">
            <el-menu-item index="3-2">黑鲷鱼企业</el-menu-item>
            </router-link>
            <router-link to="/shrimp">
              <el-menu-item index="3-3">对虾</el-menu-item>
            </router-link>
            <router-link to="/shrimp/data">
            <el-menu-item index="3-4">对虾企业</el-menu-item>
            </router-link>
            <router-link to="/shell">
              <el-menu-item index="3-5">牡蛎</el-menu-item>
            </router-link>
            <router-link to="/shell/data">
            <el-menu-item index="3-6">牡蛎企业</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <router-link to="/contact">
          <el-menu-item index="4">
            <template slot="title">
              <i class="fa fa-margin fa-server"></i>
              <span slot="title">联系我们</span>
            </template>
          </el-menu-item>
        </router-link>
        <router-link to="/feedback">
          <el-menu-item index="5">
            <template slot="title">
              <i class="fa fa-margin fa-server"></i>
              <span slot="title">留言反馈</span>
            </template>
          </el-menu-item>
        </router-link>
        <router-link to="/info">
          <el-menu-item index="6">
            <template slot="title">
              <i class="fa fa-margin fa-server"></i>
              <span slot="title">个人设置</span>
            </template>
          </el-menu-item>
        </router-link>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {}
};
</script>

<style scoped >
.menu_page {
  position: absolute;
  top: 71px;
  left: 0;
  background-color: #324057;
  z-index: 99;
}
.el-menu {
  border: none;
}
.fa-margin {
  margin-right: 5px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  height: calc(100vh - 71px);
  /* min-height: 400px; */
}
.el-menu-vertical-demo {
  width: 35px;
}
.el-submenu .el-menu-item {
  min-width: 180px;
}

.hiddenDropdown,
.hiddenDropname {
  display: none;
}
a {
  text-decoration: none;
}
</style>
